<template>
  <div class="pieChart">
      <div class="chart_bd" id="pie"></div>
  </div>
</template>

<script>
var pie;
export default {
  name: 'pieChart',
  props: ['pieData'],
  data () {
      return {
          pieChartData: []
      }
  },
  mounted () {
      this.initPieChart()
  },
  watch: {
      pieData: function (newQuestion, oldQuestion) {
          this.initPieChart();
      }
  },
  methods: {
      initPieChart () {
        pie = this.$echarts.getInstanceByDom(document.getElementById('pie'))
        if (pie === undefined) {
            pie = this.$echarts.init(document.getElementById('pie'));
        }
        var option = {
            //标题　　
            title: {
                show: true,
                text: '近7天TOP5',
                x: 'left',
                left: '15',
                top: '15',
                textStyle: {
                    color: '#da7804',
                    fontSize: '14px'
                }
            },

            //提示框，鼠标悬浮交互时的信息提示
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            //图例
            legend: {
                orient: 'vertical',
                left: '15',
                top: '45',
                data: ['考研', '考公', '就业', '创业', '其他'],
                textStyle: {
                    color: '#ccc'
                }
            },

            // 系列列表,每个系列通过 type 决定自己的图表类型
            series: [
                {
                    name: '热门场景',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { name: "考研", value: this.pieData[0], itemStyle: { color: '#2dcfac' } },
                        { name: "考公", value: this.pieData[1], itemStyle: { color: '#5680f1' } },
                        { name: "就业", value: this.pieData[2], itemStyle: { color: '#fecf12' } },
                        { name: "创业", value: this.pieData[3], itemStyle: { color: '#ff7a9b' } },
                        { name: "其他", value: this.pieData[4], itemStyle: { color: '#04b1e3' } }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        }
                    }
                }
            ],
        };
        pie.setOption(option, true);// 为echarts对象加载数据
      },
      resizeChart () {
          pie.resize()
      }
  },
  beforeDestroy () {
      this.$echarts.dispose(pie);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pieChart{
    height: 100%;
}
.chart_bd {
    height: 100%;
}
</style>
